<template>
  <div class="caseList">
    <div v-for="i in list" :key="i.id">
      <div>
        <h3 v-if="i.videoName">{{ i.videoName }}</h3>
        <h3 v-else>{{ i.star }}</h3>
        <img :src="i.img" alt="" lazy="true" />
        <b
          v-if="i.videourl"
          class=""
          @click="showvidoepaly(i.videourl, i.videoName)"
          ><el-icon><VideoPlay /></el-icon
        ></b>
      </div>
      <h2>{{ i.nm }}</h2>
    </div>
  </div>
  <div class="page" v-if="list.length > 0">
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="12"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <div class="vidoeLlayer">
    <el-dialog
      v-model="dialogTableVisible"
      :title="dialogtitle"
      @close="closedialog"
    >
      <video
        id="theVideo"
        controls="controls"
        autoplay="autoplay"
        preload="auto"
        :src="videosrc"
      ></video>
    </el-dialog>
  </div>
</template>
<script>
import { VideoPlay } from "@element-plus/icons-vue";
import { movie_Hot_API, moreComingListAPI } from "@/api/movie";
export default {
  name: "hoT",
  components: {
    VideoPlay,
  },
  data() {
    return {
      list: [
        {
          videoName: "独行月球",
          img:"https://p0.pipi.cn/mmdb/25bfd6ddbe1c7ecbaec7edee785c42fbcc785.jpg?imageMogr2/thumbnail/2500x2500%3E",
          videourl:
            "https://vod.pipi.cn/fec9203cvodtransbj1251246104/33c0c351387702303816140896/v.f42905.mp4",
          nm:"代理地址被重定向/(ㄒoㄒ)/~~"
        },
      ],
      total: 0,
      movieIds: [],
      dialogTableVisible: false,
      dialogtitle: "",
      videosrc:"",
    };
  },
  created() {
    this.getmoviehot();
  },
  methods: {
    getmoviehot() {
      movie_Hot_API().then(({ data: res }) => {
        // console.log(res.data.hot)
        this.list = res.data.hot;
        this.total = res.data.total;
        this.movieIds = this.groupList(res.data.movieIds, 12);
        // this.movieIds=res.data.movieIds
      });
    },
    groupList(arr, subGroupLength) {
      let index = 0;
      let newArray = [];
      while (index < arr.length) {
        newArray.push(arr.slice(index, (index += subGroupLength)));
      }
      return newArray;
    },
    getpagingData(val) {
      // console.log(val)
      // console.log(this.movieIds[val].join())
      moreComingListAPI(this.movieIds[val].join())
        .then(({ data: res }) => {
          this.list = res.coming;
          // console.log(res)
        })
        .catch((error) => {
          console.log("alert失败" + error);
        });
      // getpagingData()
    },
    showvidoepaly(url, name) {
      this.dialogTableVisible = true;
      this.dialogtitle = name;
      this.videosrc=url
    },
    closedialog() {
      this.videosrc=""
    },
    // handleSizeChange(val) {
    //     console.log(this.movieIds)
    // //   console.log(val)
    // },
    handleCurrentChange(val) {
      //   console.log(val)
      this.getpagingData(--val);
      //   console.log(this.movieIds)
    },
  },
  beforeUnmount(){
    this.videosrc="";
    if( document.getElementById("theVideo")){
       document.getElementById("theVideo").src="";
    }
   
  }
};
</script>
<style scoped>
.caseList {
  width: 1400px;
  margin: 80px auto auto auto;
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-flow: wrap;
  position: relative;
}

.caseList > div {
  width: 200px;
  margin-right: 20px;
  margin-bottom: 20px;
}

.caseList > div > div {
  width: 200px;
  height: 280px;
  /*background: #222A3A;*/
  /*overflow: hidden;*/
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
}

.caseList > div > div > img {
  width: 100%;
  display: block;
  margin-top: 25px;
  margin-left: 15px;
  border-radius: 8px;
  transform: scale(1.2);
}

.caseList > div > div > h3 {
  color: #ffffff;
  font-size: 16px;
  padding: 16px;
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.56);
  box-sizing: border-box;
  color: #ffffff;
  line-height: 24px;
  opacity: 0;
  letter-spacing: 1px;
  transition: all 0.6s;
  box-sizing: border-box;
  margin-bottom: 0;
}

.caseList > div > div:hover h3 {
  opacity: 1;
}
.caseList > div > div b {
  width: 40px;
  height: 40px;
  position: absolute;
  top: calc(20% - 25px);
  left: calc(50% - 25px);
  font-size: 50px;
  color: rgb(64 158 255);
  cursor: pointer;
}

.caseList > div > h2 {
  margin-top: 20px;
  text-align: center;
  font-size: 24px;
  color: #222a3a;
  font-weight: bold;
}

.page {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.vidoeLlayer >>> .el-dialog {
  width: 1000px;
  background: #000 !important;
  padding: 0 !important;
}

.vidoeLlayer >>> .el-dialog__title{
  color: #fff;
}
.vidoeLlayer >>> .el-dialog__body {
  padding-top: 0;
}
.vidoeLlayer >>> .el-dialog__headerbtn .el-icon .el-dialog__close{
  color: #fff;
}
.vidoeLlayer video {
  width: 100%;
}
</style>
